<template>
  <view class="page">
    <nav-bar>
      <template #title>
        {{ "查周边" }}
      </template>
    </nav-bar>
    <view class="container">
      <van-search
        shape="round"
        show-action
        :clearable="false"
        v-model="searchValue"
        placeholder="请输入搜索关键词"
      >
        <template #action>
          <view style="color: #1989fa" @click="onSearch">搜索</view>
        </template>
      </van-search>
      <view class="address">
        <view class="address-item" v-for="item in addressList" :key="item.id">
          <view class="address-item-title">名称: {{ item.title }}</view>
          <view class="address-item-content">
            {{ `${item._distance}m | ${item.address}` }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onLoad } from "@dcloudio/uni-app";
import { useMapStore } from "@/store/modules/map";
const searchValue = ref("");
const mapStore = useMapStore()
const addressList = ref([])
onLoad((options) => {
  console.log(options, "options");
  getAddress(options)
});
async function getAddress(options) {
  try {
    const res = await mapStore.setLocation(options)
    addressList.value = res.result.pois
  } catch (err) {
    console.log(err, "err =====");
  }
}
async function onSearch() {
  try {
    const res = await mapStore.setSearch(searchValue.value)
    addressList.value = res.data
  } catch (err) {
    console.log(err, "err =====");
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: calc(100% - 46px);
  .address {
    padding: 10px;
    .address-item {
        margin-bottom: 4px;
        border-bottom: 1px solid #ccc;
    }
  }
}
</style>